<!-- 分类页 -->
<template>
    <div class='cate'>
        <a-row type="flex" justify="center" align="top" style="margin: 15px 0;">

            <a-col :span="15" :xs="23" :sm="23" :md="23" :lg="23" :xl="15" style="height: 99%;">

                <a-card title="分类" style="width: 98%;margin: auto;">
                    <!-- 所有分类展示 -->
                    <a-card style="margin-bottom: 20px;">
                        <el-badge :value="cate.blogCount" class="item" type="primary" :key="cate.id"
                            v-for="cate in cateList">
                            <el-button size="small" @click="cateClick(cate.id)">{{cate.name}}</el-button>
                        </el-badge>
                    </a-card>

                    <!-- 博客列表 -->
                    <a-card style="margin-bottom: 20px;" v-show="blogIsShow">
                        <a-card v-for="blog in cateBlogList" :key="blog.id"
                            style="width: 98%;margin: auto;margin-bottom: 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
                            <h2 style="font-size: 22px;">
                                <router-link :to="'blog/' + blog.id" style="color: #67b3ef;">{{blog.title}}
                                </router-link>
                            </h2>
                            <p style="text-indent: 2em;margin-top: 10px;">{{blog.description}}</p>
                            <div style="font-size: 12px;margin-top: 10px;">
                                <span style="margin-right: 20px;">
                                    <a-icon type="user" />作者：{{blog.authorNickname}}
                                </span>
                                <span style="margin-right: 20px;">
                                    <a-icon type="calendar" /> 更新时间：{{blog.updateTime}}
                                </span>
                                <span style="margin-right: 20px;">
                                    <a-icon type="tag" />分类：{{blog.categoryName}}
                                </span>
                                <span style="margin-right: 20px;">
                                    <a-icon type="eye" />浏览量：{{blog.views}}
                                </span>
                            </div>
                            <div style="text-align: right;">
                                <a-button type="link" style="padding: 5px 10px;background-color: #cfe5f5;">
                                    <router-link :to="'blog/' + blog.id">阅读全文</router-link>
                                </a-button>
                            </div>
                        </a-card>
                    </a-card>

                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';

    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                cateList: [],
                cateBlogList: [],
                blogIsShow: false,
            };
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.getCates();
        },
        //计算属性
        computed: {},
        //方法集合
        methods: {
            // 获取所有分类
            getCates() {
                this.$axios.get("categories").then((res) => {
                    // console.log(res);
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.cateList = res.data.data;
                });
            },

            // 分类被点击
            cateClick(id) {
                this.$axios.get(`categories/${id}/blogs`).then((res) => {
                    // console.log(res);
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.cateBlogList = res.data.data;
                    if (res.data.data.length == 0) {
                        this.blogIsShow = false;
                        // console.log(this.blogIsShow);
                    }
                    this.blogIsShow = true;
                });
            },
        },

    };
</script>
<style>
    .cate {
        /* min-height: 600px; */
        height: 100%;
    }

    .item {
        margin-top: 10px;
        margin-right: 25px;
    }
</style>